<template>
  <div class="client-index">
    <div class="operate-module wait-deal">
      <div>
        <div>待处理任务</div>
      </div>
    </div>
    <div class="operate-module notice-news">
      <div>
        <div>新闻公告</div>
      </div>
    </div>
    <div class="fault-count">
      <div class="operate-module fault-data">
        <div>
          <div>故障统计</div>
        </div>
      </div>
      <div class="operate-module fault-from">
        <div id="myChart">
          <div>故障来源</div>
        </div>
      </div>
    </div>
    <div class="operate-module maintain-count">
      <div>
        <div>维保统计</div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'hello',
    data() {
      return {
        msg: 'Welcome to Your Vue.js App'
      }
    },
    mounted() {
      this.drawLine();
    },
    methods: {
      drawLine() {
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById('myChart'))
        // 绘制图表
        myChart.setOption({
          title: {
            text: '堆叠区域图'
          },
          backgroundColor: '#eee',
          animation: false,
          tooltip: {
            trigger: 'item',
            axisPointer: {
              type: 'cross',
              label: {
                backgroundColor: '#6a7985'
              }
            },
            backgroundColor: 'rgba(245, 245, 245, 0.8)',
            borderWidth: 1,
            borderColor: '#ccc',
            padding: 10,
            textStyle: {
              color: '#000'
            },
          },
          legend: {
            data: ['邮件营销', '直接访问', '搜索引擎']
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          stripeRows: Boolean,
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              boundaryGap: false,
              data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
              splitLine: {show: true},//去除网格线
              splitArea: {show: false},//保留网格区域
              axisLine: {
                lineStyle: {
                  type: 'solid',
                  color: 'red',//左边线的颜色
                  width: '2'//坐标线的宽度
                }
              },
              axisLabel: {
                textStyle: {
                  color: 'yellow',//坐标值得具体的颜色

                }
              }
            }
          ],
          yAxis: [
            {
              type: 'value',
              splitLine: {show: false},//去除网格线
              splitArea: {show: true},//保留网格区域
              axisLine: {
                lineStyle: {
                  type: 'solid',
                  color: '#fff',
                  width: '2'
                }
              },
              axisLabel: {
                textStyle: {
                  color: '#fff'
                }
              }
            }
          ],
          series: [
            {
              name: '邮件营销',
              type: 'line',
              stack: '总量',
              areaStyle: {normal: {}},
              data: [120, 132, 101, 134, 90, 230, 210]
            },
            {
              name: '直接访问',
              type: 'line',
              stack: '总量',
              areaStyle: {normal: {}},
              data: [320, 332, 301, 334, 390, 330, 320]
            },
          ]
        });

      }
    }
  }

</script>
<style lang="scss" scoped="scoped">
  @import '../../style/entry/clientIndex.scss'; /*首页样式引入*/
</style>
